<template>
	<view>
		<scroll-view scroll-x :scroll-into-view="scrollInto"
		scroll-with-animation
		class="scroll-row border-bottom border-light-secondary"
		style="height: 100rpx;">
			<view v-for="(item,index) in tabBars" :key="index"
				class="scroll-row-item px-3 py-2 font-md" :id="'tab' + index"
				:class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
				@click="changeTab(index)">{{item.name}}</view>
		</scroll-view>
		<swiper
			:duration="150"
			:current="tabIndex" 
			@change="onChangeTab"
			:style="'height:'+scrollH+'px;'">
			<!-- @scrolltolower：scroll组件的触底事件 -->
			<swiper-item v-for="(item,index) in newsList" :keys="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'"
				@scrolltolower="loadmore(index)">
					<!-- 有数据的时候才显示上拉加载更多 -->
					<template v-if="item.list.length > 0">
						<!-- 列表显示 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<common-list :item="item2" :index="index2" @follow="follow" @doSupport="doSupport"></common-list>
							<!-- 分割线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 没有数据的时候显示无数据 -->
					<template v-else>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
		username: "昵称1",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题1",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "support",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "unsupport",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}, {
		username: "昵称2",
		userpic: "/static/default.jpg",
		newstime: "2019-10-20 下午04:30",
		isFollow: false,
		title: "我是标题2",
		titlepic: "/static/demo/datapic/11.jpg",
		support: {
			type: "",
			support_count: 1,
			unsupport_count: 2
		},
		comment_count: 2,
		share_num: 2
	}]
	import commonList from '@/components/common/common-list.vue'
	import loadMore from '@/components/common/loadmore.vue'
	export default {
		components: {
			commonList, loadMore
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars:[{
					name:'关注'
				},{
					name:'推荐'
				},{
					name:'热点'
				},{
					name:'财经'
				},{
					name:'娱乐'
				},{
					name:'军事'
				},{
					name:'历史'
				},{
					name:'本地'
				}],
				newsList: []
			}
		},
		// 首页顶部搜索页跳转
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=post'
			});
		},
		// 首页顶部发布按钮跳转
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../add-input/add-input'
			})
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync()
			this.scrollH = systemInfo.windowHeight - uni.upx2px(101)
			// 根据选项卡生成列表
			this.getData()
		},
		methods: {
			// 获取数据
			getData () {
				var arr = []
				for(let i=0;i<this.tabBars.length;i++) {
					// 生成列表模板
					let obj = {
						// 1.上拉加载更多 2.加载中... 3.没有更多了
						loadmore: "上拉加载更多",
						list:[]
					}
					// 只有前两个导航菜单中的列表有数据，其他的都没有数据
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 监听滑动事件
			onChangeTab (e) {
				this.changeTab(e.detail.current)
			},
			follow (index) {
				this.newsList[0].list[index].isFollow=true
			},
			doSupport (e) {
				let item = this.newsList[0].list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				if(item.support.type === '') {
					item.support.type = e.type
					item.support[e.type + '_count']++
				} 
				// 之前已经顶过了
				else if(item.support.type === 'support' && e.type === 'unsupport') {
					item.support.unsupport_count++
					item.support.support_count--
				} 
				// 之前已经踩过了
				else if (item.support.type === 'unsupport' && e.type === 'support') {
					item.support.support_count++
					item.support.unsupport_count--
				}
				item.support.type = e.type
				uni.showToast({
					title: msg + '成功'
				});
			},
			changeTab (index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
			loadmore(index) {
				// 拿到当前列表
				let item = this.newsList[index]
				// 判断是否处理可加载状态(上拉加载更多)
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					// 加载数据(使用ES6的扩展运算符将数组元素合并来模拟假数据)
					item.list = [...item.list,...item.list]
					// 恢复加载状态
					item.loadmore = '上拉加载更多...'
				},2000)
			}
		}
	}
</script>

<style>

</style>
